import React, { useState, useReducer } from 'react'
import Add from './Add'
import Listcom from './Listcom'
import Footer from './Footer'
import { reducer, initState } from './store/Reducer'
//多组件需要共享的数据 提升到他们共同的父组件中 有父组件管理
import Ctx from './store/Ctx'
// 案例的入口
/*
useReducer:状态管理 替代useState
状态管理 将共享的数据 放到一个仓库中，使用统一的方式管理他们
 
*/

export default function Index() {

    //两个参数：reducer管理函数，管理的公共状态
    //返回值是个数据[公共状态,修改公共状态的方法]
    let [state, dispatch] = useReducer(reducer, initState)

    //使用上下文传参
    return (<Ctx.Provider value={{
        ...state,//状态
        dispatch//修改状态的方法
    }}>
        <div>
            <Add />
            <Listcom />
            <Footer />
        </div>
    </Ctx.Provider>

    )
}
